<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2017/2/19 0019
  Time: 19:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>sign</title>
    <link rel="stylesheet" href="css/signCss.css" type="text/css" />
    <script type="text/javascript" src="js/jquery-3.1.0.js"></script>
    <script type="text/javascript">
        $(function () {

            $("form :input.tt").each(function () {
                var $tt = $("<strong class='high'></strong>");
                $(this).parent().append($tt);
            });

            $('form :input').blur(function () {
                var $parent = $(this).parent();
                $parent.find(".formtips").remove();

                if ($(this).is('#username')) {
                    if (this.value == "" || this.value.length < 6) {
                        var errorMsg = '请输入至少6位的用户名.';
                        $parent.append('<span class="formtips onError">' + errorMsg + '</span>');
                    } else {
                        var okMsg = '输入正确.';
                        $parent.append('<span class="formtips onSuccess">' + okMsg + '</span>');
                    }
                }


                if ($(this).is('#email')) {
                    if (this.value == "" || ( this.value != "" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) )) {
                        var errorMsg = '请输入正确的E-Mail地址.';
                        $parent.append('<span class="formtips onError">' + errorMsg + '</span>');
                    } else {
                        var okMsg = '输入正确.';
                        $parent.append('<span class="formtips onSuccess">' + okMsg + '</span>');
                    }
                }
            }).keyup(function () {
                $(this).triggerHandler("blur");
            }).focus(function () {
                $(this).triggerHandler("blur");
            });


            //提交，最终验证。
            $('#send').click(function () {
                $("form :input.tt").trigger('blur');
                var numError = $('form .onError').length;
                if (numError) {
                    return false;
                }
                alert("注册成功,密码已发到你的邮箱,请查收.");
            });
        })

    </script>
</head>
<body>
<div id="all">
    <div id="title">
        <h2>注册博客</h2>
    </div>
    <div id="sign">
        <form action="/user/add" method="post" >
            <div class="name">
                <div class="th">用户名：</div>
                <div class="td">
                    <input type="text" id="username" name="userAccount" class="tt"/>

                    <div class=""></div>
                </div>
            </div>

            <div class="mail">
                <div class="th">邮箱：</div>
                <div class="td">
                    <input type="text" id="email" name="userEmail" class="tt"/>

                    <div class=""></div>
                </div>
            </div>
            <div class="password">
                <div class="th">密码：</div>
                <div class="td">
                    <input type="password" id="password" name="userPassword" class="tt"/>

                    <div class=""></div>
                </div>
            </div>
            <div class="sure-password">
                <div class="th">确认密码：</div>
                <div class="td">
                    <input type="password" id="passwordConfirm" class="tt"/>

                    <div class=""></div>
                </div>
            </div>


            <div class="registration">
                <input type="submit" value="立即注册" id="send" class="commit_color"
                       value="" style="height:30px;width:80px;
  font-weight:bolder;
  background:#ececec;border: 1px solid #bbb;
  cursor:pointer;border-radius:0.2em;"/>

                <p>点击“注册”按钮，即表示同意并愿意遵守<a href="##">用户协议</a></p>

                <p> >> <a href="login.jsp">立即登录</a></p>
            </div>
        </form>
    </div>

</div>
</body>
</html>
